<template>
  <el-card style="padding: 10px; margin-bottom: 20px">
    <div class="y-center" style="justify-content: space-between">
      <div class="y-center">
        <svg-icon
          icon="head"
          class="mr-20"
          style="border-radius: 50%; font-size: 60px"
        />
        <div class="y-center">
          <span class="text1">
            您好，{{ store.getters.userInfo.name }}, 今天又是充满活力的一天!
          </span>
        </div>
      </div>
      <div class="y-center mr-20">
            <button class="okr" @click="go1">发布本月的okr</button>
        <!--<el-statistic :value="4">
          <template #title>
            <span class="text2" style="color: #9d9d9d">待申报任务</span>
          </template>
        </el-statistic>-->
      </div>
    </div>
  </el-card>
  <el-row :gutter="10" style="margin-top:10px;">
    <el-col :span="6">
      <el-card style="padding: 10px; width: 100%">
      <div class="y-center mb-20">
        <svg-icon icon="check" class="mr-20" style="font-size: 50px"></svg-icon>
        <div>
          <el-statistic :value="value2" class="mr-20">
            <template #title>
              <el-icon size="large"><Edit/></el-icon>
              <span class="text2" style="color: #00acee">评分任务</span>
            </template>
            <template #suffix ><span class="unit">件</span></template>
          </el-statistic>
          <button class="custom-btn button2" @click="go3"><span style="color: #fff;!important">前往评分</span></button>
        </div>
      </div>
    </el-card>
    </el-col>
    <el-col :span="6" >
      <el-card style="padding: 10px; width: 100%">
      <div class="y-center mb-20">
        <svg-icon icon="check" class="mr-20" style="font-size: 50px"></svg-icon>
        <div>
          <el-statistic :value="value1" class="mr-20">
            <template #title>
              <el-icon size="large"><CreditCard/></el-icon>
              <span class="text2" style="color:#c797eb">初审任务</span>
            </template>
            <template #suffix ><span class="unit">件</span></template>
          </el-statistic>
          <button class="custom-btn button1" @click="go2"><span style="color: #fff;!important">前往初审</span></button>
        </div>
      </div>
    </el-card>
    </el-col>
    <el-col :span="6">
      <el-card style="padding: 10px; width: 100%">
      <div class="y-center mb-20">
        <svg-icon icon="check" class="mr-20" style="font-size: 50px"></svg-icon>
        <div>
          <el-statistic :value="value3" class="mr-20">
            <template #title>
              <el-icon size="large"><EditPen/></el-icon>
              <span class="text2" style="color: #4dccc6">重评任务</span>
            </template>
            <template #suffix ><span class="unit">件</span></template>
          </el-statistic>
          <button class="custom-btn button3" @click="go4"><span style="color: #fff;!important">前往重评</span></button>
        </div>
      </div>
    </el-card>
    </el-col>
    <el-col :span="6">
      <el-card style="padding: 10px; width: 100%">
      <div class="y-center mb-20">
        <svg-icon icon="check" class="mr-20" style="font-size: 50px"></svg-icon>
        <div>
          <el-statistic :value="value4" class="mr-20">
            <template #title>
              <el-icon size="large"><RefreshRight/></el-icon>
              <span class="text2" style="color: #f796c0">初审重审任务</span>
            </template>
            <template #suffix ><span class="unit">件</span></template>
          </el-statistic>
          <button class="custom-btn button4" @click="go5"><span style="color: #fff;!important">前往重审</span></button>
        </div>
      </div>
    </el-card>
    </el-col>
	<el-col :span="6">
	  <el-card style="padding: 10px; width: 100%">
	  <div class="y-center mb-20">
	    <svg-icon icon="check" class="mr-20" style="font-size: 50px"></svg-icon>
	    <div>
	      <el-statistic :value="value5" class="mr-20">
	        <template #title>
	          <el-icon size="large"><RefreshRight/></el-icon>
	          <span class="text2" style="color: #f796c0">兼职评分任务</span>
	        </template>
	        <template #suffix ><span class="unit">件</span></template>
	      </el-statistic>
	      <button class="custom-btn button4" @click="go6"><span style="color: #fff;!important">前往评分</span></button>
	    </div>
	  </div>
	</el-card>
	</el-col>
  </el-row>
  
  
  
  
</template>

<script setup>
import { getPermission } from '@/api/api';
import { ref, onMounted,onBeforeMount, computed, watch } from 'vue';
import { useRouter } from "vue-router";
import { useStore } from 'vuex';
import {getFourthTaskCount} from "@/api/task"
const store = useStore();
const router = useRouter();

const value1=ref(0)
const value2=ref(0)
const value3=ref(0)
const value4=ref(0)
const value5=ref(0)

onBeforeMount(() => {
  let assessorId = JSON.parse(localStorage.getItem("userInfo")).id;
  getFourthTaskCount({assessorId}).then((data) => {
	  
    value1.value=data.data.count1
    value2.value=data.data.count2
    value3.value=data.data.count3
    value4.value=data.data.count4
	value5.value=data.data.count5
  });
});

const go1=()=>{
  router.push({
    path: "/declare/okrDeclare",
  });
}

const go2=()=>{
  router.push({
    path: "/OA/fourthApprove",
  });
}

const go3=()=>{
  router.push({
    path: "/declare/fourthDeclare",
  });
}

const go5=()=>{
  router.push({
    path: "/back/fourthDetial",
  });
}

const go4=()=>{
  router.push({
    path: "/back/reDeclare",
  });
}

const go6=()=>{
  router.push({
    path: "/person/partTimeReward",
  });
}
</script>

<style lang="scss" scoped>
$primary1: #425aef;
$primary2: #44b93c;
.unit{
  color: #9d9d9d;
  font-size: 20px;
}

.okr{
  width:120px;
  height:50px;
  border-radius:15px;
  color:#363636;
  display: inline-block;
  border: #363636 2px dashed;
  background: #fff;
}

.el-statistic {
  --el-statistic-content-font-size: 30px;
}
* {
  font-family: 阿里健康体;
  color: #363636;
  transition: all 0.3s;
  box-sizing: border-box;
}
.title {
  font-size: 1.5625rem;
  letter-spacing: 0.1875rem;
  padding: 0 0 1rem;
  margin-bottom: 16px;
  text-align: center;
}
@mixin Tip($color) {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 0 1rem 1rem;
  letter-spacing: 0.0625rem;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    width: 4px;
    height: 50%;
    background-color: $color;
    border-radius: 8px;
  }
}
.text1 {
  font-size: 20px;
  font-weight: 700;
}
.text2 {
  font-size: 18px;
  font-weight: 500;
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.x-center {
  display: flex;
  justify-content: center;
}
.y-center {
  display: flex;
  align-items: center;
}
.mr-20 {
  margin-right: 20px;
}
.mb-20 {
  margin-bottom: 20px;
}
@mixin Card($color) {
  width: 100%;
  padding: 1.25rem 1rem;
  letter-spacing: 0.0625rem;
  font-weight: 500;
  transition: all 0.3s;
  margin-bottom: 10px;
  &:hover .title1 {
    color: $color;
  }
  &:hover {
    border: 1px solid $color;
  }
  .title1 {
    font-size: 18px;
  }
  .content {
    position: relative;
    font-size: 16px;
    margin-right: 20px;
    cursor: pointer;
    &::before {
      content: '';
      position: absolute;
      right: 0;
      bottom: -5px;
      width: 100%;
      height: 4px;
      background-color: $color;
      border-radius: 8px;
      transform: scale(0);
      transition: all 0.3s;
    }
    &:hover::before {
      transform: scale(1);
    }
  }
}
.tip1 {
  @include Tip($primary1);
}
.flow {
  display: flex;
}
.card1 {
  @include Card($primary1);
}
.tip2 {
  @include Tip($primary2);
}
.card2 {
  @include Card($primary2);
}

.el-card {
  border-radius: 10px;
  padding: 0;
}

.custom-btn {
	  width: 130px;
	  height: 40px;
	  color: #fff !important;
	  border-radius: 5px;
	  padding: 10px 25px;
	  font-family: 'Lato', sans-serif;
	  font-weight: 500;
	  background: transparent;
	  cursor: pointer;
	  transition: all 0.3s ease;
	  position: relative;
	  display: inline-block;
	   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
	   7px 7px 20px 0px rgba(0,0,0,.1),
	   4px 4px 5px 0px rgba(0,0,0,.1);
	  outline: none;
	}
@mixin Button($color) {
    background-color: #f0ecfc;
    background-image: linear-gradient(315deg, #f0ecfc 0%, $color 74%);
    line-height: 42px;
    padding: 0;
    border: none;
    position: relative;

    span {
      display: block;
      width: 100%;
      height: 100%;
      position: relative;
      &:before,
      &:after {
        position: absolute;
        content: "";
        right: 0;
        bottom: 0;
        background: $color;
        transition: all 0.3s ease;
      }
      &:before {
        height: 0%;
        width: 2px;
      }
      &:after {
        width: 0%;
        height: 2px;
      }
    &:hover span:before {
      height: 100%;
    }
    &:hover span:after {
      width: 100%;
    }
    &:hover {
      background: transparent;
    }
    &:hover span {
      color: $color;
    }
  }

  .btn-8:hover .title1 {
    color: $color;
  }

  .btn-8:hover {
    border: 1px solid $color;
  }

  .title1 {
    font-size: 18px;
  }

  .content {
    position: relative;
    font-size: 16px;
    margin-right: 20px;
    cursor: pointer;

    &::before {
      content: '';
      position: absolute;
      right: 0;
      bottom: -5px;
      width: 100%;
      height: 4px;
      background-color: $color;
      border-radius: 8px;
      transform: scale(0);
      transition: all 0.3s;
    }

    &:hover::before {
      transform: scale(1);
    }
  }
}
.button1{
  @include Button(#c797eb);
}
.button2{
  @include Button(#00acee);
}
.button3{
  @include Button(#4dccc6);
}
.button4{
  @include Button(#f796c0);
}
.button5{
  @include Button(#1609f0);
}

</style>
